<script setup lang="ts">
import { computed, reactive, ref } from "vue";
import { ElForm, ElFormItem, ElInput, ElMessage, ElButton } from "element-plus"
import { Cell } from "@ui/pack-antv-x6";
import { pickData } from "../../util"
import Nifi from "../../nifi";
import {t} from "../../i18n/index"
//

//
const { nifi, component,cell, resolve, disabled = false } = defineProps<{ nifi: Nifi,component?:any, cell?: Cell, disabled?: boolean, resolve?: (arg: any) => void }>();

// const gid = nifi.group.id;
const cd = cell ? nifi.cells.get(cell) : {};

const isDisabled = computed(() => nifi.graph.mode.value == 'prod' || disabled);
// 参数上下文选项初始化
// const parameterContextOptions = reactive<any[]>([])
// nifi.flow.refreshParameterContexts().then(() => {
//     const ops: any[] = nifi.flow.parameterContexts.map((d: any) => ({ label: d.component.name, value: d.component.id }));
//     parameterContextOptions.push(...ops)
// })
//
const KEYS: any = [
    ['name', 'component.name'],
    ['comments', 'component.comments'],
]
const model = reactive({ name: "",comments:"", ...pickData(cd, KEYS) });
// 关闭 抽屉
const closeDrawer = () => {
    nifi.drawer.close();
}
const submitLoading = ref(false)
//
const handleCanel = () => { closeDrawer(); }
//
const elFormRef = ref<InstanceType<typeof ElForm>>();
const checkName = async (name: string) => {
    const status = await nifi.group.refreshGroupStatus();
    const { inputPortStatusSnapshots } = status?.aggregateSnapshot
    const ns = inputPortStatusSnapshots?.map((d: any) => d.portStatusSnapshot.name) || [];
    return !ns.includes(name)
}
const nameRules = [
    { required: true, message: "请输入标签名", trigger: 'blur' },
    {
        validator: (rule: any, value: any, callback: any) => {
            checkName(value).then((b) => {
                if (b) {
                    callback();
                }
                else {
                    callback(new Error('名称重复'))
                }
            })
        }, trigger: 'blur'
    }
]
const handleSubmit = async () => {
    // 校验表单
    try {
        await elFormRef.value?.validate();
    } catch (error) {
        // ElMessage.warning('表单验证失败，请检查表单值是否符合要求');
        return;
    }
    //

    //
    submitLoading.value = true;
    //

    //
    try {
        if (cell) {
            const id = cell.id;
            const revision = cd.revision;
            const data = { disconnectedNodeAcknowledged: false, revision, component: { ...model, id } }
            const res = await nifi.cells.setCell(cell, data)
            nifi.cells.inputPorts.update(res);
            
        }
        else if (resolve) {
            //
            const res = await nifi.cells.inputPorts.addNode({...component,...model})
            if(typeof res == 'string'){
                console.log('............',res)
            }else{
                resolve(res)
            }
            
        }
        //
        closeDrawer();
    } catch (error) {
        ElMessage.error('更新处理组信息失败 :: ' + error);
        console.error(error)
    }
    submitLoading.value = false;
}
//


</script>


<template>
    <div class="w-full h-full flex flex-col">
        <!-- header -->
        <div class="w-full overflow-hidden box-border flex justify-between items-center gap-8px m-b-16px h-40px">
            <div class="flex-1 truncate fw-bold">
                <i></i>
                编辑输入端口 [ {{ model.name }} ]
            </div>
            <div class="w-140px flex justify-end">
                <template v-if="isDisabled">
                    <el-button plain type="primary" @click="handleCanel">确定</el-button>
                </template>
                <template v-else>
                    <el-button plain @click="handleCanel">取消</el-button>
                    <el-button type="primary" @click="handleSubmit" :loading="submitLoading">提交</el-button>
                </template>
            </div>
        </div>
        <!-- Form -->
        <ElForm ref="elFormRef" :model="model" label-width="200" label-position="left" :disabled="isDisabled"
            class="w-full box-border flex flex-1 flex-col gap-8px overflow-y-auto overflow-x-hidden p-8px box-border scrollbar-thin text-14px">
            <ElFormItem label="标签名称" :rules="nameRules">
                <ElInput v-model="model.name"></ElInput>
            </ElFormItem>
            <ElFormItem label="描述">
                <ElInput v-model="model.comments" type="textarea"></ElInput>
            </ElFormItem>
        </ElForm>
    </div>
</template>
